<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS伪类选择器示例</title>
    <style>
      /* 链接相关伪类 */
      a:link {
        color: blue;
      } /* 未访问的链接 */
      a:visited {
        color: purple;
      } /* 已访问的链接 */
      a:hover {
        color: red;
      } /* 鼠标悬停 */
      a:active {
        color: orange;
      } /* 点击时 */

      /* 结构伪类 */
      li:first-child {
        font-weight: bold;
      } /* 第一个子元素 */
      li:last-child {
        font-style: italic;
      } /* 最后一个子元素 */
      li:nth-child(odd) {
        background: blue;
      } /* 奇数行 */
      li:nth-child(even) {
        background: red;
      } /* 偶数行 */
    </style>
  </head>
  <body>
    <h1>CSS伪类选择器示例</h1>
    <section>
      <h2>链接伪类</h2>
      <a href="#link">未访问链接</a> |
      <a href="https://www.baidu.com/">已访问链接</a>
    </section>

    <section>
      <h2>表单伪类</h2>
      <input type="text" placeholder="获取焦点试试" />
      <input type="text" disabled value="禁用输入框" />
      <input type="checkbox" id="check" />
      <label for="check">选中我</label>
    </section>

    <section>
      <h2>结构伪类</h2>
      <ul>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
        <li>第四项</li>
        <li>第五项</li>
      </ul>
    </section>
  </body>
</html>
